<template>
    <view class="globe_back">
        <view class="box">
            <view class="card">
                <view class="cardText">
                    <view class="cardTitle">建设银行</view>
                    <view class="cardType">储蓄卡</view>
                    <view class="number">6217 **** **** 5462</view>
                </view>

                <image class="cardImg" src="@/static/imgs/jsyh.png" mode="widthFix"></image>
            </view>
            <view class="card">
                <view class="cardText">
                    <view class="cardTitle">建设银行</view>
                    <view class="cardType">储蓄卡</view>
                    <view class="number">6217 **** **** 5462</view>
                </view>
                <image class="cardImg" src="@/static/imgs/jsyh.png" mode="widthFix"></image>
            </view>
            <view class="addBtn back_3377FF br_24 cl_fff mt_24" @click="add">添加银行卡</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        add() {
            uni.navigateTo({
                url: '/pages/business/AddBankCard'
            });
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
}
.addBtn {
    width: 686rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 24px auto;
    position: fixed;
    bottom: 80rpx;
}
.card {
    width: 686rpx;
    height: 280rpx;
    position: relative;
    margin-bottom: 24rpx;
    .cardImg {
        width: 100%;
    }
    .cardText {
        position: absolute;
        color: white;
        top: 32rpx;
        .cardTitle {
            font-size: 32rpx;
            margin-left: 144rpx;
        }
        .cardType {
            font-size: 28rpx;
            margin-left: 144rpx;
        }
        .number {
            margin-top: 44rpx;
            font-size: 52rpx;
            margin-left: 32rpx;
        }
    }
}
</style>
